<template>
	<view class="page">
		<Update v-if="updatePopup" :versionInfo="versionInfo"></Update>
		<view class="status"></view>
		<view style="width: 100%; height: calc(var(--status-bar-height));"></view>
		<view class="search-box" @click="goSearch"  :style="{backgroundColor:headBackgroudColor}">
			<view class="search" :style="{backgroundColor:searchBackgroudColor}">
				<image src="/static/img/search.png"></image>
				<text style="color: #555">商品名称/关键词</text>
			</view>	
		</view>
		<view class="top">
			<swiper autoplay  circular interval="2000">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="sort-wrap">
			<view class="notice">
				<text class="notice-content">通知</text>
				<image src="/static/img/bell.png" class="bell"></image>
				<view class="swiper-info">
					<scroll-msg class="swiper-content" :type='1' :scrolltext="scrollMsg" v-if='scrollMsg!=""'></scroll-msg>
				</view>
				<view class="bar"></view>
			</view>
			<view class="sort">
				<view class="sort-item" v-for="(item,index) in icon" :key="index" @click="cateClick(item.id)">
					<image :src="item.src_imgurl"></image>
					<text style="white-space: nowrap;">{{item.title}}</text>
				</view>
					<image src="/static/img/index-ten.png" class="select-more" @click="toCategorySpecial"></image>
					<text class="more-text" @click="toCategorySpecial">查看更多</text>
			</view>
		</view>
		<view class="activity">
			<view class="activity-left">
				<image src="/static/img/trumpet.png"></image>
				<text>满减活动</text>
			</view>
			<view class="activity-right">
				<!-- <scroll-msg class="activity-right1" :type='2' :scrolltext="activityMsg" v-if='activityMsg!=""'></scroll-msg> -->
				<text>{{activityMsg}}</text>
			</view>
		</view>
		<view v-if="!btype" ><image :src="advetImgurl" class="autumn"></image></view>
		<view v-if="btype"><image :src="advetImgurl" class="autumn" @click="bizproDetail()"></image></view>
		<view class="recommend">
			<image src="/static/img/recommend.png"></image>
			<text>商 · 品 · 推 · 荐</text>
		</view>
		<view id='recommend-content' :class="['recommend-content',maxRecommend?'maxRecommend':'']" ref='recommend'>
			<scroll-view scroll-x  :style="{'width': '638rpx','margin-left':maxRecommend?'20rpx':''}">
				<view class="recommend-title">
					<view class="recommend-item"  @click="tuijian">
							<text :style="recommendIndex === 0? 'color:#FEB147':''" >推荐</text>
							<view class="line" v-if="recommendIndex === 0"></view>
					</view>
					<view class="recommend-item" v-for="(item,index) in titleList" :key="index" @click="recommendClick(item.id)" >
							<text :style="recommendIndex === item.id? 'color:#FEB147':''" >{{item.title}}</text>
							<view class="line" v-if="recommendIndex === item.id"></view>
					</view>
				</view>
			</scroll-view>
			<image src="/static/img/more.png" @click="toCategory" class="cate"></image>
		</view>
		<view class="goods-list">
			<view class="goods-list-item" v-for="(item,index) in goodsList" :key="index" @click="toDetail(item.b_id)">
				<image :src="item.imgurl"></image>
				<text class="goods-name">{{item.b_name}}</text>
				<view style="" class="tagmain">
					<text class="tag-one tag" v-for="(lb,i) in item.label" :key='i' v-if="i<2">{{lb}}</text>
				</view>
				
				<text class="price">¥{{item.sale_price}}</text>
				<text class="high-price">原价：{{item.old_price}}</text>
				<text class="sell-count">销量：{{item.real_num}}件</text>
			
				<text></text>
				
			</view>
			<text class="more" v-if="goodsList.length==0" style="color: #808080;">~暂无更多此类商品~</text>
			<text class="more" v-if="goodsList.length!=0" @click="toCategoryById">点击查看更多商品</text>
		</view>

		<Authority v-if='showAuthority' :closeBtn='closeAuthority' :btnFunction='authorityFun'></Authority>
	</view>
</template>

<script>
	import { request } from '../../request/index.js';
	import ScrollMsg from '@/components/ScrollMsg.vue';
	import ComHeader from '@/components/ComHeader.vue';
	import Authority from '@/components/authorityPopup.vue'
	import Update from '@/components/Update';
	export default {
		onLoad: function(options) {
			var that = this
			uni.getSystemInfo({  
			    success: function(res) {  
			        that.statusBarHeight = res.statusBarHeight;  
			        
			    }  
			});  
			console.log(uni.getStorageSync('member'))
			//微信登录授权
			this.toWxLogin()
			this.getSwiperList(); 
			this.getSwiperMsg();
			this.getIcon();
			this.getActivityMsg();
			this.getGoodsTitleList();
			this.getGoodsList();
			this.getAdvert();
			//获取强制更新缓存
			this.fore();
			this.getUseris();
			this.getclient();
			
		},
		
		onShow() {
			//获取强制更新缓存
			this.fore();
			//修改ish5
			this.getUseris();
			this.getclient();
		},
		data() {  
			return {
				swiperList: [], // 轮播图
				scrollMsg: '', // 首页轮播消息
				icon: [], // 首页专区图标
				activityMsg: '', // 首页满减信息
				titleList: [], // 商品标题列表
				goodsList: [], // 商品列表
				recommendIndex: 0,
				advetImgurl:'',
				headBackgroudColor:'rgba(252,175,70,0)',
				searchBackgroudColor:'rgba(255,255,255,0.3)',
				maxRecommend:false,
				getmemberInfo:'',
				recommendView:null,
				btype:false,
				bizproId:'',
				showAuthority:false,
				searchHeight:180,
				statusBarHeight:'',
				navPosTop:0,
				updatePopup:false,
				versionInfo:[],
					
			}
		},
		onPageScroll(Object){
				var query = uni.createSelectorQuery().in(this);
				query.select('#recommend-content').boundingClientRect(data => {
				  if(data.top < this.statusBarHeight+45){
				  	this.maxRecommend=true
				  }else{
				  	this.maxRecommend=false
				  }
				}).exec();
				if(Object.scrollTop<=100){
					this.headBackgroudColor = 'rgba(252,175,70,'+Object.scrollTop/100+')'
					// this.searchHeight = 180 - Object.scrollTop
					var op = Object.scrollTop/100
					if(op<0.3){
						op = 0.3
					}else{
						op = Object.scrollTop/100
					}
					this.searchBackgroudColor = 'rgba(255,255,255,'+op+')'
				}else if(Object.scrollTop>100){
					this.headBackgroudColor = 'rgba(252,175,70,1)'
					// this.searchHeight = 80
					var op = Object.scrollTop/100
					if(op<0.3){
						op = 0.3
					}else{
						op = Object.scrollTop/100
					}
					this.searchBackgroudColor = 'rgba(255,255,255,1)'
					
				}
			
		},
		onReady(){
			this.getNavPos()
		},
		
		methods: {
			//获取设备id
			getclient(){
				// #ifdef APP-PLUS
					 plus.push.getClientInfoAsync(function(info){
						 uni.setStorageSync("cid",info.clientid);
						 console.log(uni.getStorageSync("cid"),'_____________________________________走')
						 
						 
					 }, function(e){
					 })
				// #endif
			},
			
			//是否注册过app
			getUseris(){
				var userInfo = uni.getStorageSync("member")
				console.log(userInfo,'————————————————————用户信息')
				var cid = uni.getStorageSync("cid");
				if(cid == '' || cid == null){
					this.getclient()
					var cid = uni.getStorageSync("cid");
					
				}
				
				console.log(cid,'————————————————————设备id信息')
				this.$api.getUserisInfo({unionid:userInfo.unionId,mark:'app','cid':cid
				}).then(res => {
					console.log('isapp',res,'------------------')
					
									
				})
			},
			//强制更新缓存
			fore(){
				var that = this
				let version = uni.getStorageSync('fore')
				
				console.log(uni.getStorageSync('fore'),'强制更新缓存开始')
				if(version.status == 1){
					//status= 1 说明更新 返回数据
					that.updatePopup = true;
					that.versionInfo = uni.getStorageSync('fore')
				}else{
					//删除缓存
					uni.removeStorageSync("fore")
					this.updatePopup = false;
				}
			},
			toDownload(){
				
				uni.navigateTo({
					url:'/pages/download/download?url='+this.versionInfo.url+'&note='+this.versionInfo.note+'&version='+this.versionInfo.version+'&size='+this.versionInfo.size+'&update_time='+this.versionInfo.update_time
				})
			},
			
			closeUpdatePopup() {
				
				//删除缓存
				uni.removeStorageSync("fore")
				this.updatePopup = false;
				
			},
			/* ------------------强制更新缓存结束---------------------- */
			//打开授权弹框
			openAuthority(){
				this.showAuthority = true
			},
			//关闭授权弹框
			closeAuthority(){
				this.showAuthority = false
			},
			getNavPos(){
				var that = this
				var query = uni.createSelectorQuery().in(this);
				query.select('#recommend-content').boundingClientRect(data => {
				  console.log("节点离页面顶部的距离为" + data.top);
				  console.log("节点高度为" + data.height);
				  that.navPosTop = data.top-data.height
				}).exec();
			},
			// 执行授权方法
			authorityFun(){
				var that = this;
			
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
					
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.showLoading({
								title:'授权中'
							})
							uni.login({
								provider: 'weixin',
								success: function(loginRes) { 
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											uni.hideLoading()
											console.log("App微信获取用户信息成功", infoRes.userInfo);
											that.showAuthority = false
											//授权时修改 ish5 的状态  2 App 下载过了  1 没有下载
											console.log(infoRes.userInfo.openId,'登录openId')
											//在这请求获取用户信息的接口 手机号 有返回值存member 没有 则存 微信返回的
											that.$api.getUnidMember({openId_app:infoRes.userInfo.openId,unionid:infoRes.userInfo.unionId}).then(res => {
												console.log(res)
												console.log(res.data)
												console.log(res.data.phone,'授权获取用户手机号')
												console.log(res.data.minfo,'状态')
												if(res.data.status == true){
													if(res.data.minfo == true){
														if(res.data.data.phone==null||res.data.data.phone==''||typeof(res.data.data.phone)=='undefined'){
															//注册页
															uni.navigateTo({
																url:'/pages/register/Register'
															}) 
														}else{
															//数据库中的 可能有phone 也能 没有 但一定有 头像 昵称 unionid
															uni.setStorage({
																key: "member",
																data: res.data.data
															})
															uni.setStorage({
																key: "token",
																data: res.data.data.token
															})
															//首页 有手机号跳首页
															uni.switchTab({
																url:'/pages/index/index'
															})
														}
													}else{
														//微信返回的 没有phone
														uni.setStorage({
															key: "member",
															data: infoRes.userInfo
														})
														//注册
														uni.navigateTo({
															url:'/pages/register/Register'
														}) 
													}
													
													
												}
												
												
											})
											
											
											//在这里跳到微信授权页
										}
									});
								
								},
								fail: function(res) {
									console.log("App微信获取用户信息失败", res);
								}
							})
						}
					}
				});
			},
			
			//微信授权登录 跳转页面
			toWxLogin(){
				//获取信息存缓存
				var t=this;

				var _member = uni.getStorageSync("member")
				if(_member!=''&&_member!=null){
					console.log(_member)
				}else{
					console.log(_member)
					console.log(t.getmemberInfo,'没有用户缓存')
					console.log("App微信拉起授权"); 
					// this.showAuthority = true;
					//电脑上调试 改为 false
					this.showAuthority = true;
				}
				
			},
			//首页搜索
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/Search"
				})
			},
		
			//获取广告商品详情
			bizproDetail(){
				uni.navigateTo({
					url: "/pages/goods/GoodsDetail?id="+this.bizproId
				})
				
			},
				
			// 获取首页轮播图数据 
			 getSwiperList() {
				 this.$api.getSwiperList().then(res => {
					 this.swiperList = res.data.data;
					
				 })
			 },
			 // 获取首页轮播消息
			 getSwiperMsg() {
				 this.$api.getSwiperMsg().then(res => {
					 this.scrollMsg = res.data.data.content;
					
				 })
			 },
			 // 获取首页专区图标
			 getIcon() {
				 this.$api.getIcon().then(res => {
					 this.icon = res.data.data;
				 })
			 },
			 // 获取首页满减信息
			 getActivityMsg() {
				 this.$api.getActivityMsg().then(res => {
					 if(res.data.data == ''){
						 this.activityMsg = '暂无满减活动！';
					 }else{
						 this.activityMsg = res.data.data[0].title;
					 }
					
				 })
			 },
			 // 获取首页广告位图
			 getAdvert() {
				 this.$api.getAdvert({advert_type:'1'}).then(res => {
					// 是否关联商品  1 是2 否
					 this.bizproId =  res.data.data.bizpro_id
					 if(res.data.data.bizpro_type == 1){
						 this. btype=true
					 }
					 this.advetImgurl =res.data.data.imgurl 
				 })
			 },
			
			 // 获取首页商品推荐标题
			 getGoodsTitleList() {
				 this.$api.getGoodsTitleList().then(res => {
					 this.titleList = res.data.data;
				 })
			 },
			// 获取首页商品推荐商品
			 getGoodsList() {
				 this.recommendIndex = 0
				 this.$api.getGoodsList({rand:true}).then(res => {
					 this.goodsList = res.data.data;
					
				 })
			 },
			 tuijian(){
				 this.recommendIndex = 0
				 this.$api.getGoodsList().then(res => {
					 uni.pageScrollTo({
					 	scrollTop:this.navPosTop,
					 	duration: 100
					 });
					this.goodsList = res.data.data;
						
				 					
				 })
			 },
			 cateClick(spearea_id) {
				 console.log(spearea_id);
				 uni.navigateTo({
					url: '/pages/search/SpecialDisplay?spearea_id='+spearea_id
				 })
			 },
			 //首页分类
			 recommendClick(class_id) {
				 this.recommendIndex = class_id;
				 uni.pageScrollTo({
				 	scrollTop:this.navPosTop,
				 	duration: 100
				 });
				 console.log(this.recommendIndex)
				 this.$api.getGoodsList({class_pid:class_id}).then(res => {
				 	this.goodsList = res.data.data;
				 })
			 },
			 toDetail(id) { 
				 uni.navigateTo({  
					 url: '/pages/goods/GoodsDetail?id=' + id
				 })
				 console.log(id);
				 
			 },
			 //商品查看更多
			 toCategoryById() {
				 if(this.recommendIndex==0){
					 uni.setStorageSync('recommendIndex',1)
				 }else{
					 uni.setStorageSync('recommendIndex',this.recommendIndex)
				 }
				 
				 
				 uni.switchTab({
				 	url: '/pages/category/Category'
				 })
			 },
			 toCategory() {
			 	 uni.switchTab({
			 		url: '/pages/category/Category'
			 	})
			 },
			 //专区查看更多
			 toCategorySpecial(){
				 uni.switchTab({
				 	url:'/pages/category/Category' 
				 })
				
			 },
				 
		},
		 components: {
			 ScrollMsg,
			 ComHeader,
			 Authority,
			 Update
		 }
	}
</script>


<style >
	.page {
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff7e3;
		/* height: 100%; */
	}
	.recommend-title {
		display: flex;
		align-items: center;
		width: 600rpx;
		height: 130rpx;
		white-space: nowrap;
		margin-top: 0rpx;
	}
	.cate {
		display: block;
		width: 32rpx;
		height: 24rpx;
		margin-left: 20rpx;
		/* margin-top: 30rpx; */
	}
	.status {
		position: fixed;
		z-index: 1000;
		width: 100%;
		height: calc(var(--status-bar-height));
		background: #FEB147;
	}
	.top {
		position: relative;
		width: 750rpx;
		height: 484rpx;
		overflow: hidden;
	}
	swiper {
		width: 100%;
		height: 750rpx;
	}
	swiper image {
		width: 100%;
	}
	.search-box{
		position: fixed;
		z-index: 10;
		width: 100%;
		height: 80rpx;
		/* top: 100rpx; */
	}
	.search {
		margin-left: 30rpx;
		margin-top: 110rpx;
		width: 690rpx;
		position: absolute;
		bottom: 10rpx;
		height: 60rpx;
		background:rgba(255,255,255,0.3);
		border:1rpx solid rgba(229,229,229,1);
		/* position: relative; */
		/* opacity: 0.3; */
		border-radius: 30rpx;
	}
	.search text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(204,204,204,1);
		opacity:0.8;
		margin-left: 234rpx;
	}
	.search image {
		position: absolute;
		left: 39rpx;
		top: 14rpx;
		width: 32rpx;
		height: 32rpx;
	}
	.sort-wrap {
		position: relative;
		z-index: 8;
		width: 710rpx;
		height: 409rpx;
		margin-left: 20rpx;
		margin-top: -40rpx;
		background: rgba(255,255,255,1);
		box-shadow:0rpx 4rpx 10rpx 0rpx rgba(255,236,192,0.95);
		border-radius: 20rpx;
	}
	.notice {
		position: relative;
		width: 710rpx;
		height: 86rpx;
		overflow: hidden;
	}
	.notice-content {
		display: inline-block;
		height: 28rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254,177,71,1);
		line-height: 40rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
	}
	.bell {
		position: absolute;
		top: 28rpx;
		width: 25rpx;
		height: 26rpx;
		margin-left: 14rpx;
	}
	.swiper-info {
		position: absolute;
		top: 18rpx;
		right: 31rpx;
		width: 525rpx;
		height: 50rpx;
	}
	.swiper-content {
		position: absolute;
		top: -20rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
	}
	.swiper-content >>>text{
		font-size: 28rpx;
	}
	.bar {
		position: absolute;
		top: 15rpx;
		left: 30rpx;
		width: 650rpx;
		height: 10rpx;
		border: 1rpx solid rgba(254,177,71,1);
		border-top: none;
		margin-top: 41rpx;
	}
	.sort {
		position: relative;
		display: flex;
		width: 710rpx;
		height: 322rpx;
		flex-wrap: wrap;
		overflow: hidden;
		text-align: center;
	}
	.sort-item {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 112rpx;
		margin-top: 30rpx;
		width: 20%;
	}
	.select-more {
		width: 72rpx;
		height: 72rpx;
		margin-top: 30rpx;
		margin-left: 36rpx;
	}
	.more-text {
		position: absolute;
		right: 23rpx;
		bottom: 21rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.sort-item image {
		width: 76rpx;
		height: 76rpx;
		background:linear-gradient(180deg,rgba(81,225,184,1),rgba(13,204,150,1));
		border-radius:50%;
	}
	.sort-item text {
		display: block;
		width: 97rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		line-height: 20rpx;
		margin-top: 10rpx;
	}
	.activity {
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 60rpx;
		margin-left: 30rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	.activity-left {
		display: flex;
		align-items: center;
		width: 226rpx;
		height: 60rpx;
		background: #FFC961;
		border-radius: 10rpx;
	}
	.activity-left image {
		margin-left: 20rpx;
		width: 42rpx;
		height: 42rpx;
	}
	.activity-left text {
		font-size: 28rpx;
		font-family: IPix;
		font-weight: 400;
		color: rgba(255,255,255,1);
		margin-left: 22rpx;
	}
	.activity-right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 470rpx;
		height: 60rpx;
		/* padding-left: 20rpx; */
		
	}
	.activity-right1{
		color:rgba(254,177,71,1);
		margin-top: -20rpx;
	}
	.activity-right text {
		font-size: 28rpx;
		font-family: IPix;
		font-weight: 400;
		color: #FEB147;
		
	}
	.autumn {
		display: block;
		width:710rpx;
		height:220rpx;
		border-radius:20rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
	.recommend {
		position: relative;
		width: 710rpx;
		height: 165rpx;
		text-align: center;
		margin-left: 20rpx;
		margin-top: 20rpx;
		
	}
	.recommend-item {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 10rpx;
	}
	.recommend image {
		width: 710rpx;
		height: 165rpx;
		
	}
	.recommend text {
		position: absolute;
		left: 212rpx;
		top: 52rpx;
		height: 35rpx;
		line-height: 35rpx;
		font-size: 38rpx;
		font-family: HanWangHeiHeavy;
		font-weight: 400;
		color: rgba(255,255,255,1);
	}
	.recommend-content {
		display: flex;
		align-items: center;
		width: 710rpx;
		height: 100rpx;
		font-size: 30rpx;
		margin-left: 20rpx;
		background: #fff;
		margin-top: -30rpx;
		position: sticky;
		z-index: 12;
		/* top: 80rpx; */
		top: calc(var(--status-bar-height) + 80rpx);
		overflow: hidden;
		box-shadow:0px 0px 4px 0px rgba(250,250,250,0.95), 0px 2px 4px 0px rgba(204,204,204,1);
		/* background: #007AFF; */
	}
	.maxRecommend{
		width: 750rpx;
		margin-left: 0rpx;
	}
	.recommend-content image {
		width: 32rpx;
		height: 24rpx;
	}
	.goods-list{
		width: 710rpx;
		height: auto;
		display: table;
		margin-bottom: 40rpx;
		margin-left: 20rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.goods-list-item {
		position: relative;
		width: 670rpx;
		height: 200rpx;
		margin-left: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		background: rgba(255,255,255,1);
		box-shadow:0rpx -4rpx 8rpx 0rpx rgba(250,250,250,0.95), 0px 4rpx 8rpx 0px rgba(204,204,204,1);
		border-radius: 10rpx;
	}
	.goods-list-item:first-child{
		margin-top: 30rpx;
	}
	.goods-list-item image {
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.goods-name {
		display: block;
		position: absolute;
		top: 27rpx;
		left: 210rpx;
		/* height: 31rpx; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		width: 200px;
		font-weight: bold;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.tagmain{
		width:100%;
		height:auto;
		float:left;
		position: absolute;
		top: 64rpx;
		left: 210rpx;
	}
	.tag {
		display: inline-block;
		align-items: center;
		justify-content: center;
		width: auto;
		padding:0px 6px;
		height: 28rpx;
		line-height: 28rpx;
		background: rgba(222,245,255,1);
		border: 1rpx solid rgba(185,233,255,1);
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72,180,231,1);
		margin-right:7px;
	}
	.tag-one {
		/* position: absolute;
		top: 77rpx;
		left: 210rpx; */
	}
	.tag-two {
		position: absolute;
		top: 77rpx;
		left: 332rpx;
	}
	.price {
		position: absolute;
		top: 117rpx;
		left: 212rpx;
		width: 233rpx;
		height: 23rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight:500;
		color:rgba(254,177,71,1);
	}
	.high-price {
		position: absolute;
		top: 155rpx;
		left: 210rpx;
		height: 21rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		text-decoration: line-through;
	}
	.sell-count {
		position: absolute;
		top: 155rpx;
		right: 50rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.more {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254,177,71,1);
		text-decoration: underline;
	}
	.line {
		width: 28rpx;
		height: 4rpx;
		background: rgba(254,177,71,1);
		border-radius: 2rpx;
		/* margin: 0 auto; */
	}
</style>